<template>
  <div>
    <h1>文章分类<span class="total">总共{{total}}条</span></h1>
    <el-table :data="items">
      <el-table-column prop="_id" label="ID" width="260"></el-table-column>
      <el-table-column prop="title" label="分类名称"></el-table-column>
      <el-table-column
      label="操作"
      fixed="right"
      width="180">
      <template slot-scope="scope">
        <el-button type="primary" size="small" @click="$router.push(`/articles/edit/${scope.row._id}`)">编辑</el-button>
        <el-button type="danger" size="small" @click="remove(scope.row)">删除</el-button>
      </template>
    </el-table-column>
    </el-table>
    <el-pagination
      background
      layout="prev, pager, next"
      :total="total"
      :pageSize="10"
      :current-page.sync="currentPage"
      @current-change="fetch"
    ></el-pagination>
  </div>
</template>

<script>
export default {
  data () {
    return {
      items: [],
      total: 0,
      currentPage: 1
    }
  },
  methods: {
    async fetch () {
      // var data = await this.$http.get('/rest/articles')
      // this.items = data.data
      const url = `/rest/articles/?page=${this.currentPage}`
      // console.log(this.currentPage)
      const res = await this.$http.get(url)
      const { code, data, totalCount } = res.data
      // console.log(res.data)
      if (code === 1) {
        this.items = data
        this.total = totalCount
      }
    },
    async remove (row) {
      this.$confirm(`是否删除文章 "${row.title}"`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        await this.$http.delete(`/rest/articles/${row._id}`)
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
        this.fetch()
      })
    }
  },
  created () {
    this.fetch()
  }
}
</script>
